<template>
  <div class="home-page ">
    <div v-for="(item, index) in list" :key="index" class="newspaper-item" @click="() => goPage(item.id)">
      <div class="cover">
        <img :src="item.cover" />
      </div>
      <div class="title">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { listNewspaperApi } from "@/api/mock";
const list = ref([])
listNewspaperApi().then(data => {
  list.value = data
})

const router = useRouter()
const goPage = (newspaperId) => {
  router.push({ name: "page", query: { newspaperId } });
}
</script>

<style lang="scss" scoped>
.home-page {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
  background-color: var(--van-doc-background-3);
  padding: 10px;

  .newspaper-item {
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;

    img {
      width: 100%;
    }

    .title {
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      padding: 4px 0;
    }
  }
}
</style>
